<script setup lang="tsx">
import AvatarImg from '@/assets/avatar-default.png';
import { useUserStore } from '@/store/modules/user';
import message from 'vc/src/common/message';
import { type VNode } from 'vue';
import { userEdit } from '../../apis/profile';
import ChangeEmail from '../../components/change-email.vue';
import PhoneVerify from '../../components/phone-verify.vue';
import ChangePhone from '../../components/change-phone.vue';
import ChangePwd from '../../components/change-pwd.vue';
import ChangeAuthInfo from '../../components/change-auth-info.vue';
import ChangeAvatar from '../../components/change-avatar.vue';
import { formatPhoneHide } from '../../utils';
import { AccountInfoEnum } from './constants';
import AuthSrc from '../../assets/auth.png';

const userStore = useUserStore();

const nickName = ref(userStore.getUserInfo?.nickname || '');

let showChangeEmail = $ref(false);
let showVerify = $ref(false);
let showChangePhone = $ref(false);
let showChangePwd = $ref(false);
let showChangeAuthInfo = $ref(false);
let showChangeAvatar = $ref(false);

let isEditName = $ref(false);
let isEditEmail = $ref(true);
let isEditAuth = $ref(true);
let changePwdCode = $ref('');

let smsType = $ref('updatePhone');

const { run, loading } = useRequest(userEdit, {
  manual: true,
  onSuccess: (res) => {
    userStore.setUserInfo(res);
    isEditName = false;
    message.success('修改成功');
  }
});

const infos = computed<{
  title: string,
  value?: VNode | string
  actionTitle?: VNode | string
  action?: any
  actionEdit?: any
  isEdit?: boolean
}[]>(() => {
  return [
    {
      title: AccountInfoEnum.AVATAR,
      value: <img class="w-40px h-40px" src={userStore.getUserInfo?.photo || AvatarImg} alt="" />,
      actionTitle: '修改'
    },
    {
      title: AccountInfoEnum.NICKNAME,
      value: userStore.getUserInfo?.nickname || '',
      actionTitle: '修改'
    },
    {
      title: AccountInfoEnum.AUTH_INFO,
      value: userStore.getUserInfo?.certifiedStatus === 2 ? <span class="text-[#333] align-center flex">
        <span class="companyTitle" title={userStore.getUserInfo?.company}>{userStore.getUserInfo?.company}</span>
        <img src={AuthSrc} class="w-54px h-18px"/></span> :
        userStore.getUserInfo?.certifiedStatus === 1 ?
          <span class="text-[#1382EF] flex justify-start">
            <span class="companyTitle text-[#333]">{userStore.getUserInfo?.company}</span><img style="height:20px;margin:auto;" src=""></img></span> : userStore.getUserInfo?.certifiedStatus === 3 ? <span class="text-red-500  flex justify-start"><span
            class="companyTitle  text-[#333]">{userStore.getUserInfo?.company}   </span>审核失败</span> : '未认证',
      actionTitle: userStore.getUserInfo?.businessCardUrl ? '修改' : '开始认证'
    },
    {
      title: AccountInfoEnum.PHONE,
      value: formatPhoneHide(userStore.getUserInfo?.phone) || '',
      actionTitle: '更换'
    },
    {
      title: AccountInfoEnum.EMAIL,
      value: userStore.getUserInfo?.email || '-',
      actionTitle: userStore.getUserInfo?.email ? '更换' : '绑定邮箱'
    },
    {
      title: AccountInfoEnum.CHANGE_PWD,
      actionTitle: '修改',
      action: () => {
        showVerify = true;
      }
    },
    {
      title: AccountInfoEnum.INVITATION_CODE,
      value: userStore.getUserInfo?.inviteCode ? <span class="common-link">{userStore.getUserInfo?.inviteCode}</span> : '无'
    }
  ];
});

const handleClick = (name) => {
  switch (name) {
  case AccountInfoEnum.AVATAR:
    showChangeAvatar = true;
    break;
  case AccountInfoEnum.NICKNAME:
    isEditName = true;
    break;
  case AccountInfoEnum.AUTH_INFO:
    showChangeAuthInfo = true;
    isEditAuth = !!userStore.getUserInfo?.businessCardUrl;
    break;
  case AccountInfoEnum.PHONE:
    smsType = 'updatePhone';
    showVerify = true;
    break;
  case AccountInfoEnum.EMAIL:
    showChangeEmail = true;
    isEditEmail = !!userStore.getUserInfo?.email;
    break;
  case AccountInfoEnum.CHANGE_PWD:
    smsType = 'changePw';
    showVerify = true;
    break;
  // case AccountInfoEnum.INVITATION_CODE:
    // isEditName = true;
    // break;
  }
};

const renderBtnGroup = (isLoading, onCancel, onConfirm) => {
  return <div class="flex items-center">
    <el-button class="change-color" size="default" onClick={onCancel}>取消</el-button>
    <el-button type="primary" color="#02C680" style="color:#FFFFFF;" loading={isLoading.value} onClick={onConfirm} size="default">确定
    </el-button>
  </div>;
};
defineRender(() => {
  return (
    <>
      <ul class="account">
        {
          infos.value.map((item, index) => {
            return <li class="item" key={index}>
              <div class="info">
                <span class="title">{item.title}</span>
                {isEditName && index === 1 ?
                  <vc-input class="w-300px h-32px mt-4px" maxlength="30" minlength="1" model-value={nickName.value}
                    onInput={(value) => nickName.value = value}></vc-input> :
                  <span class="sub-title">{item.value}</span>}
              </div>
              {isEditName && index === 1 ? renderBtnGroup(loading, () => {
                  isEditName = false;
                  nickName.value = userStore.getUserInfo?.nickname || '';
                }, () => {
                  if (nickName.value) {
                    run({ nickname: nickName.value });
                  } else {
                    message.warning('输入的昵称不能为空!');
                  }
                }) :
                <span class="common-link text-14px"
                  onClick={() => handleClick(item.title)}>{item.actionTitle}</span>}
            </li>;
          })
        }
      </ul>
      {
        showChangeAuthInfo ?
          <ChangeAuthInfo isEdit={isEditAuth} v-model:showDialog={showChangeAuthInfo}></ChangeAuthInfo>
          : null
      }
      {
        showChangeEmail ?
          <ChangeEmail isEdit={isEditEmail} v-model:showDialog={showChangeEmail}></ChangeEmail>
          : null
      }
      {
        showVerify ?
          <PhoneVerify smsType={smsType} v-model:showDialog={showVerify}
            v-model:showChangePhone={showChangePhone}
            v-model:showChangePwd={showChangePwd}
            v-model:changePwdCode={changePwdCode}
          ></PhoneVerify>
          : null
      }
      {
        showChangePhone ?
          <ChangePhone v-model:showDialog={showChangePhone}></ChangePhone>
        : null
      }
      {
        showChangePwd ?
          <ChangePwd v-model:showDialog={showChangePwd} v-model:changePwdCode={changePwdCode}></ChangePwd>
          : null
      }
      {
        showChangeAvatar ?
          <ChangeAvatar v-model:showDialog={showChangeAvatar}></ChangeAvatar>
          : null
      }
    </>
  );
});
</script>

<style scoped lang="scss">
:deep(.info){
  .vc-input__inner{
    padding-left: 16px;
  }
}
:deep(.change-color){
  &:hover{
    color: #02C680;
    background-color: rgba(231,247,243,0.3);
    border-color: #02C680;
  }
  &:focus{
    color: #02C680;
    background-color: rgba(231,247,243,0.3);
    border-color: #02C680;
  }
}.account {
  margin-left: 42px;
  padding-top: 10px;

  .item {
    display: flex;

    .info {
      height: 40px;
      width: 470px;
      display: flex;
      margin: 10px 0;
      line-height: 40px;
      .title {
        width: 104px;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
      .sub-title{
        color: #333333;
      }
      &+span{
        line-height: 60px;
        color: #02C680;
      }
    }
  }

  .action {
    font-weight: 400;
    font-size: 14px;
    color: #02C680;
  }

  .sub-title {
    //font-weight: 500;
    height: 40px;
    font-size: 14px;
    color: #8B8C8C;
  }
}

.content {
  padding: 20px;
}

.companyTitle {
  max-width: 300px;
  margin-right: 5px;
  @include line-clamp(1, true)
}
</style>
